<template>
  <n-popconfirm :show-icon="false" @positive-click="handleEvent">
    <template #trigger>
      <n-button tertiary type="error" :disabled="disabled">
        <template #icon>
          <n-icon :component="data.icon"/>
        </template>
        {{data.name}}
      </n-button>
    </template>
    <span>确认{{data.name}}?</span>
  </n-popconfirm>
</template>

<script lang="ts" setup>
import {DeleteOutlined, CancelOutlined, BackHandOutlined} from "@vicons/material";
import {computed} from "vue";
const props = defineProps<{
  iconType: "delete" | "cancel",
  disabled: boolean
}>();
const data = computed(() => {
  switch (props.iconType) {
    case "cancel":
      return {
        name: "取消",
        icon: CancelOutlined
      };
    case "delete":
      return {
        name: "删除",
        icon: DeleteOutlined
      };
    default:
      return {
        name: "操作",
        icon: BackHandOutlined
      };
  }
});
const emits = defineEmits<{(e: "handleEvent"): void}>();
const handleEvent = (): void => {
  emits("handleEvent");
}
</script>
